<!--
* @description 通用印刷体识别
* @fileName list.vue
* @author huangyu
* @date 2021/09/24 11:47:44
!-->
<template>
    <div class="container">
        <el-tag type="warning" style="margin-bottom:20px;">通用印刷体识别：：图片要求不能超过 7M。</el-tag>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form label-width="100px">
                    <el-form-item label="选择图片">
                        <uploadFile @tempFileURL="tempFileURL" :show.sync="show"></uploadFile>
                    </el-form-item>
                    <el-form-item label="图片地址">
                        <el-input placeholder="请输入图片地址" v-model="ImageUrl"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary" @click="getImage">提交智能识别文字</el-button>
                    </el-form-item>
                </el-form>
                <div class="demo-image__preview" style="width: 100%;text-align:center;" v-if="ImageUrl">
                    <el-image :src="ImageUrl" fit="cove"></el-image>
                </div>
            </el-col>
            <el-col :span="12">
                <el-button type="warning" v-if="isComponents&&list.length>0" plain @click="changeValue">确认数据</el-button>
                <!-- <el-button type="warning" plain @click="changeValue2">导入帮派数据</el-button> -->
                <el-input type="textarea" v-model="textHtml" :rows='20'></el-input>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { get } from '@/common/app.js'
import uploadFile from "@/components/system/upload_file.vue"
export default {
    components: {uploadFile},
    props:{
        isComponents: {
            type: Boolean,
            default: false,
        }
    },
    data() {
        return {
            type:1,
            list: [],
            ImageUrl: "",
            textHtml: "",
            show: true,
        }
    },
    mounted() {
        
    },
    methods: {
        tempFileURL(url){
            this.ImageUrl = url
        },
        getImage(){
            // window.console.log(time)
            if(!this.ImageUrl){
                this.$message.error("图片地址不能为空!")
                return
            }
            this.textHtml = ""
            let params = {
                type: "getOcrImageText",
                ImageUrl: this.ImageUrl,
            }
            get('common',params).then(res=>{
                if(res){
                    this.list = res.TextDetections
                    console.log(this.list)
                    if(this.list.length>0){
                        this.list.forEach(item=>{
                            this.textHtml=this.textHtml+item.DetectedText+'\n'
                        })
                    }
                }
            })
        },
        changeValue(){
            // 返回名称数据给父组件
            let arr = []
            if(this.list&&this.list.length>0){
                this.list.forEach(item=>{
                    if(item.DetectedText){
                        arr.push(item.DetectedText)
                    }
                })
            }
            this.$emit('changeValue',arr)
        },
        changeValue2(){
            let arr = []
            let resultArr = []
            arr = this.splitArray(this.list,this.list.length/4)

            arr.forEach(item=>{
                resultArr.push({
                    name: item[0].DetectedText,
                    house: item[1].DetectedText,
                    sect: item[3].DetectedText,
                    score: 0,
                })
            })
            console.log(arr)
            console.log(resultArr)
            this.getClanAdd(resultArr)
        },
        splitArray(baseArray, n) {
            let length = baseArray.length
            let sliceNum = length % n === 0 ? length / n : Math.floor((length / n) + 1)
            let res = []
            for (let i = 0; i < length; i+=sliceNum) {
                let arr = baseArray.slice(i, i+sliceNum)
                res.push(arr)
            }
            return res
        },
        getClanAdd(list){
            let params = {
                type: "getClan",
                api: "api-clan-add",
                data: list,
            }
            get('game',params).then(res=>{
                if(res){
                    this.$message.success("添加成功！")
                }
            })
        },
    },
}
</script>

<style scoped>

</style>